<!DOCTYPE html>
[#escape x as (x)!?html]
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我要留言 - ${site.seoTitle} - Powered by JPROCMS</title>
    [#include '../includes/common_res.html'/]
    <link
      rel="stylesheet"
      href="${resource}/static/plugins/aj-captcha/css/verify.css"
    />
    <script src="${resource}/static/plugins/crypto-js/crypto-js.min.js"></script>
    <script src="${resource}/static/plugins/sm-crypto/dist/sm2.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/crypto-js.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/ase.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/verify.js"></script>
  </head>
  <body>
    [#assign shadowNav=true/] [#include '../includes/header.html'/]
    <div class="container">
      <div class="row">
        <div class="col mt-3">
          <div class="d-flex align-items-center py-1 border-bottom">
            <div class="flex-grow-1 h5 mb-0">
              <a href="${base}/guestbook/post">我要留言</a>
            </div>
            <div>
              <a class="btn btn-primary" href="${base}/guestbook" role="button"
                >留言板</a
              >
            </div>
          </div>
          <div class="mt-3">
            <form
              id="validForm"
              action="${api}/guestbook"
              method="post"
              class="bg-light p-3 mb-3"
            >
              <fieldset class="form-group row">
                <legend class="col-form-label col-sm-2 float-sm-left pt-0">
                  留言类别<strong class="text-danger">*</strong>
                </legend>
                <div class="col-sm-10">
                  [@ZDictList type='cms_guestbook_type'; list] [#list list as
                  type]
                  <div
                    class="custom-control custom-radio custom-control-inline"
                  >
                    <input class="custom-control-input" type="radio"
                    name="guestbookType" id="type${type_index?c}"
                    value="${type.value}" required [#if
                    type_index==0]checked[/#if]>
                    <label
                      class="custom-control-label"
                      for="type${type_index?c}"
                      >${type.label}</label
                    >
                  </div>
                  [/#list] [/@ZDictList]
                </div>
              </fieldset>
              <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label"
                  >留言标题<strong class="text-danger">*</strong></label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="title"
                    name="title"
                    maxlength="150"
                    title="请填写留言标题"
                    required
                  />
                </div>
              </div>
              <div class="form-group row">
                <label for="text" class="col-sm-2 col-form-label"
                  >留言内容<strong class="text-danger">*</strong></label
                >
                <div class="col-sm-10">
                  <textarea
                    type="text"
                    class="form-control"
                    id="text"
                    name="msgText"
                    maxlength="2000"
                    rows="8"
                    title="请填写留言内容"
                    required
                  ></textarea>
                </div>
              </div>
              <div class="form-group row">
                <label for="contactUser" class="col-sm-2 col-form-label"
                  >联系人</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="contactUser"
                    name="contactUser"
                    maxlength="50"
                  />
                </div>
              </div>
              <div class="form-group row">
                <label for="msgPhone" class="col-sm-2 col-form-label"
                  >联系电话</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="msgPhone"
                    name="msgPhone"
                    maxlength="50"
                  />
                </div>
              </div>
              <div class="form-group row">
                <label for="msgEmail" class="col-sm-2 col-form-label"
                  >电子邮箱</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="msgEmail"
                    name="msgEmail"
                    maxlength="50"
                    data-rule-email="true"
                    data-msg-email="请填写有效的邮箱地址"
                  />
                </div>
              </div>
              <div id="captcha-containerId"></div>
              <input
                type="hidden"
                name="captchaVerification"
                id="captchaVerification"
              />
              <button
                type="button"
                id="guestbookSubmit"
                class="btn btn-primary"
              >
                确认提交
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    [#include '../includes/footer.html'/] [#include '../includes/inc_msg.html'/]
    <script>
      $("#successModal").on("hidden.bs.modal", function () {
        location.href = "${base}/guestbook";
      });
      //验证码
      $("#captcha-containerId").slideVerify({
        baseUrl: "${base}", //服务器请求地址;
        containerId: "guestbookSubmit", //pop模式 必填 被点击之后出现行为验证码的元素id
        mode: "pop", //展示模式
        imgSize: {
          //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
          width: "400px",
          height: "200px",
        },
        barSize: {
          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
          width: "400px",
          height: "40px",
        },
        beforeCheck: function () {
          //检验参数合法性的函数  mode ="pop"有效
          let flag = true;
          //实现: 参数合法性的判断逻辑, 返回一个boolean值
          return flag;
        },
        ready: function () {}, //加载完毕的回调
        success: function (params) {
          //成功的回调
          // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
          //例如: login($.extend({}, params))
          $("#captchaVerification").val(params.captchaVerification);
          $("#validForm").submit();
        },
        error: function () {
          alertTip("验证码错误");
        }, //失败的回调
      });

      $(function () {
        $("#title").focus().select();
        $("#validForm").validate({
          submitHandler: function (form) {
            event.preventDefault();
            const formData = $(form).serializeJSON();
            const token = sessionStorage.getItem("accessToken");
            axios
              .post(form.action, formData, {
                headers: {
                  "Tenant-Id": Cms.getTenantId(),
                  Authorization: "Bearer " + token,
                },
              })
              .then(function (response) {
                if (response.data.code === 0) {
                  successTip("留言成功，等待管理员审核！");
                  location.href = "${base}/guestbook";
                }
                location.href = "${base}/guestbook";
              });
          },
        });
      });
    </script>
  </body>
</html>
[/#escape]
